<template>
    <div ref="container" class="preview-container" @click.stop="containerClick($event)">

        <div class="content">
            <div class="contentTitle">{{userName}}的不符合信息项</div>

             <div class="module">
                
                <div class="item" v-for="(item,index) in dataList" :key="index">
                    {{index+1}}、{{item.clauseGroupName}}
                </div>

             </div>

        </div>
    </div>
</template>

<script>

import { participationFindNotPassDetailPost } from '@/service/api'
import Qs from 'qs'

export default {
    props:{
        userName:String,
        recordId:String,
    },
    data(){
        return {
            dataList:[],
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            var param = {recordId:this.recordId};
            participationFindNotPassDetailPost(Qs.stringify(param)).then(res => {
                if(res.code == 200){
                    this.dataList = res.data;
                }
            });
        },
        containerClick(event){
            if(event.target.className.indexOf("preview-container") != -1){
                this.$refs.container.style.display="none";
            }
        },
    },
    watch:{
        recordId(){
            this.loadData();
        }
    }
    
}
</script>
<style scoped>

.preview-container{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: #00000045;

    display: none;
    /* display: flex; */
    flex-direction:column;
    align-items: center;
    overflow-y: auto;
}

.preview-container>.content{
    background: white;
    width: calc(100% - 416px);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-top: 80px;
    margin-bottom: 20px;

    box-shadow: 3px 1px 12px 1px #00000069;
    border-radius: 5px;
    padding-bottom:56px;
}

.contentTitle{
    text-align: center;
    font-size: 31px;
    font-weight: bold;
    color:white;
    padding: 18px 0px 22px 0px;
    background: #314790;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    background-image: url(../../assets/home/beijing_shang@2x.png);
    background-size: 40% 100%; /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
    background-repeat: no-repeat;
    background-position: right; /* left/center/right top/center/bottom;*/
}


.preview-container>.content>.module{
    display: flex;
    flex-shrink: 0;
    flex-direction:column;
    padding: 40px;
}

.preview-container>.content>.module>.item{
    padding: 10px 0px;
    font-size: 14px;
}

</style>